<template>
    <div class="login clearfix">
        <div class="login-wrap">
            <el-row type="flex" justify="center">
                <el-form ref="user" :model="user" :rules="rules" status-icon label-width="100px">
                    <h3>注册</h3>
                    <hr>
                    <el-form-item prop="username" label="用户名:">
                        <el-input v-model="user.username" placeholder="请输入用户名" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码:">
                        <el-input v-model="user.password" show-password placeholder="请输入密码" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="passagin" label="验证密码:">
                        <el-input v-model="user.passagin" show-password placeholder="请再次输入密码" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱:">
                        <el-input v-model="user.email" type="email" placeholder="请输入邮箱" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="emailCode" label="邮箱验证码:">
                        <el-input v-model="user.emailCode" type="emailCode" placeholder="请输入验证码"
                                  style="width: 50%; margin-right: 10%" clearable></el-input>
                        <!-- 倒计时按钮 -->
                        <el-button type="primary" :disabled="emailCodeString.disable"
                                   :class="{ codeGetting:emailCodeString.isGeting }" @click="getVerifyCode"
                                   style="width: 40%; color: #0c0c0c;">{{ emailCodeString.getCode }}
                        </el-button>
                    </el-form-item>
                    <el-form-item class="login-wrap-footer">
                        <el-button type="primary" plain @click="doRegister()" style="margin-right: 2vw;">注册账号
                        </el-button>
                        <router-link to="/" class="link-with-underline">登&nbsp;&nbsp;&nbsp;&nbsp;录</router-link>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "UserRegister",
    data() {
        var validateOldPass = (rule, value, callback) => {
            // if (value === '') {
            //     callback(new Error('请再次输入密码'));
            // } else if (value !== this.user.userPass) {
            //     callback(new Error('旧密码输入错误!'));
            // } else {
            //     callback();
            // }
        };
        // 校验密码
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.user.passagin) {
                callback(new Error('两次输入的密码不一致!'));
            } else {
                callback();
            }
        };
        // 校验邮箱
        var validateEmail = (rule, value, callback) => {
            // if (/^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(value) === false) {
            if (/^\w{1,64}@[a-z0-9]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(value) === false) {
                callback(new Error("邮箱格式错误"));
            } else {
                callback();
            }
        };
        return {
            user: {
                username: "",
                password: "",
                passagin: "",
                email: "",
                emailCode: "",
            },
            emailCodeString: {
                getCode: '获取验证码',
                isGetting: false,
                count: 60,
                disable: false
            }, rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                ],
                passagin: [
                    {required: true, message: '请再次输入新密码', trigger: 'blur'},
                    {validator: validatePass, trigger: ['blur', 'change']}
                ],
                email: [
                    {required: true, message: "请输入邮箱", trigger: "blur"},
                    {validator: validateEmail, trigger: "blur"}
                ],
                emailCode: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                ],
            }
        };
    },
    created() {
        // console.log($);
        // console.log("1111");
    },
    methods: {
        doRegister() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    // 校验通过提交。
                    this.register();
                }
            });
        },
        // 注册
        register() {
            this.$store.dispatch('userRegister', this.user).then(res => {
                // console.log("res.data2222222222 =====>", res);
                // console.log("getUserInfo.res", res);
                if (res !== undefined && res.resultStatus === true) {
                    // console.log("res.resultData", res.resultData);
                    // this.$message.success(res.resultData);
                    this.$message.success("注册成功！请登录！");
                    this.$router.push({path: "/"});
                } else if (res !== undefined && res.resultStatus === false) {
                    // console.log("res.resultData", res.resultData);
                    this.$message.error(res.errorMessage + "！", res.resultData);
                }
            }).catch(res => {
                this.$message.error("注册失败！");
            });
        },
        // 邮箱验证码获取。
        getVerifyCode() {
            this.getEmailCode(this.user.email);
            var countDown = setInterval(() => {
                // console.log("this.count ========>", this.emailCodeString.count);
                if (this.emailCodeString.count < 1) {
                    this.emailCodeString.isGeting = false
                    this.emailCodeString.disable = false
                    this.emailCodeString.getCode = '获取验证码'
                    this.emailCodeString.count = 6
                    clearInterval(countDown)
                } else {
                    this.emailCodeString.isGeting = true
                    this.emailCodeString.disable = true
                    this.emailCodeString.getCode = this.emailCodeString.count-- + 's后重发'
                }
            }, 1000);
            // 调用获取验证码功能。
        },

        // 获取邮箱验证码。
        getEmailCode(email) {
            console.log("email ========>", email)
            if (email === '' || email === undefined) {
                this.$message.error("请输入邮箱！");
                return false
            }
            this.$store.dispatch('getEmailCode', email).then(res => {
                // console.log("getUserInfo.res", res);
                if (res !== undefined && res.resultStatus === true) {
                    // console.log("res.resultData", res.resultData);
                    this.$message.success(res.resultData);
                }
            })
        },

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
    width: 100%;
    height: 100%;
    background: url("~@/assets/userbackground.jpg") no-repeat;
    background-size: cover;
    overflow: hidden;
}

.login-wrap {
    background: rgba(255, 255, 255, 0.8);
    background-size: cover;
    width: 550px;
    height: 100%;
    margin: 158px auto;
    overflow: hidden;
    padding-top: 10px;
    line-height: 20px;
}

.login-wrap-footer {
    display: block;
    text-align: center;
}

h3 {
    color: #0babeab8;
    font-size: 24px;
}

hr {
    background-color: #444;
    margin: 20px auto;
}

.el-button {
    width: 60%;
    margin: 0 auto;
    color: #fff;
}

.link-with-underline {
    text-decoration: underline;
    color: #2c3e50;
    /* 其他样式，如颜色、字体大小等 */
}

.codeGetting {
    background: #cdcdcd;
    border-color: #cdcdcd;
}
</style>